<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style>
			.main{
				width:270px;
				height:270px;
				border:2px solid #ccc;
			}
			.main div{
				width:90px;
				height:90px;
				border:1px solid #fff;
				box-sizing: border-box;
				float: left;
				text-align: center;
				line-height: 90px;
				font-size: 30px;
				background: #000;
				font-weight: bold;
				color:#fff;
			}
			.main div img{
				width:90px;
				height:90px;
			}
			p{
				width:270px;
				height:90px;
				background: #ccc;
				margin-top:10px;
				font-size: 30px;
				text-align: center;
				line-height: 90px;
				font-weight: bold;
				display: none;
			}
			p img{
				width:270px;
				height:270px;
			}
		</style>
	</head>

	<body bgcolor="#000">
		<div class="main">
			
			<div><img src="img/1.jpg" alt=""></div>
			<div><img src="img/10.jpg" alt=""></div>
			<div><img src="img/2.jpg" alt=""></div>
			<div><img src="img/3.jpg" alt=""></div>
			<div><img src="img/4.jpg" alt=""></div>
			<div><img src="img/5.jpg" alt=""></div>
			<div><img src="img/6.jpg" alt=""></div>
			<div><img src="img/7.jpg" alt=""></div>
			<div><img src="img/8.jpg" alt=""></div><br /><br />
			<p class="xian"><img src="img/1.jpg" alt=""></p>
			<p class="xian"><img src="img/10.jpg" alt=""></p>
			<p class="xian"><img src="img/2.jpg" alt=""></p>
			<p class="xian"><img src="img/3.jpg" alt=""></p>
			<p class="xian"><img src="img/4.jpg" alt=""></p>
			<p class="xian"><img src="img/5.jpg" alt=""></p>
			<p class="xian"><img src="img/6.jpg" alt=""></p>
			<p class="xian"><img src="img/7.jpg" alt=""></p>
			<p class="xian"><img src="img/8.jpg" alt=""></p>
		</div>
		
	</body>
<script>
	var div = document.getElementsByClassName("main")[0].getElementsByTagName("div")
	var xi = document.getElementsByClassName("xian")
	for(var i=0; i<div.length; i++){
		div[i].index=i
		div[i].onmouseover=function(){
			for(var i=0; i<div.length; i++){
				div[i].style.background="#000"
				div[i].style.color="#fff"
				xi[i].style.display="none"
			}
			div[this.index].style.background="#fff"
			div[this.index].style.color="#000"
			xi[this.index].style.display="block"
		}
	}
</script>
</html>
